<template>
    <div class="container">
        <el-card>
            <span class="_before">AES-256-GCM</span>
            <p>输入需加密字符串</p>
            <el-input v-model="state.plaintext" style="width: 240px" placeholder="请输入字符串" /> <el-button @click="encrypt">加密</el-button>
            <p>密钥</p>
            <div>{{state.key || "--"}}</div>
            <p>加密后字符串</p>
            <div>{{state.encryptedData || "--"}}</div>
            <p>解密后字符串</p>
            <div>{{state.decryptedData || "--"}}</div>
        </el-card>

        <el-card class="marginTop20">
            <p>加密后Base64 to string</p>
            <el-input v-model="base64Data.base64ToString" style="width: 240px" placeholder="请输入字符串" /> <el-button @click="decodeBase64Node('1',base64Data.base64ToString)">转换1</el-button>
            <p>转换后</p>
            <div>
                {{base64Data.base64String || "--"}}
            </div>
            <p>私钥Base64 to string</p>
            <el-input v-model="base64Data.base64PrivateKey" style="width: 240px" placeholder="请输入字符串" /> <el-button @click="decodeBase64Node('2',base64Data.base64PrivateKey)">转换2</el-button>
            <p>转换后</p>
            <div>
                {{base64Data.stringPrivateKey || "--"}}
            </div>
        </el-card>
        <el-card class="marginTop20">
            <span class="_before">RSA</span>
            <p>输入需加密字符串</p>
            <el-input v-model="rsaState.plaintext" style="width: 240px" placeholder="请输入字符串" /> <el-button @click="rsa">加密</el-button>
            <p>公钥</p>
            <el-input v-model="rsaState.exportPublicKey" style="width: 240px" placeholder="请输入公钥字符串" />
            <p>私钥</p>
            <el-input v-model="rsaState.exportPrivateKey" style="width: 240px" placeholder="请输入私钥字符串" />
            <p>加密后字符串</p>
            <div>{{rsaState.rsaEncrypt || "--"}}</div>
            <p>解密后字符串</p>
            <div>{{rsaState.rsaDecrypt || "--"}}</div>
        </el-card>

        <el-card>
            <span class="_before">RSA解密</span>
            <p>输入私钥</p>
            <el-input v-model="rsaData.exportPrivateKey" style="width: 240px" placeholder="请输入字符串" /> <el-button @click="decryptData11(rsaData.exportPrivateKey,rsaData.rsaKeyString)">解密密</el-button>
            <p>加密后字符</p>
            <el-input v-model="rsaData.rsaKeyString" style="width: 240px" placeholder="请输入字符串" /> 
            <p>解密后字符</p>
            <div>{{rsaData.plaintext}}</div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { generateKey,encryptData,decryptData } from "@/utils/cryptography"
import {generateRSAKeyPair,exportPublicKey,exportPrivateKey,importPublicKey,importPrivateKey,rsaEncrypt,rsaDecrypt,rsaDecrypt1,base64ToString} from "@/utils/rsa"
import {reactive,onMounted } from "vue"
import { Buffer } from 'buffer'
import JSEncrypt from 'jsencrypt';
// import { } from "@/utils/rsa-aes"
const state = reactive({
    key: '',
    plaintext: '',
    encryptedData: '',
    decryptedData: ''
})
const base64Data =reactive({
    base64ToString: '',
    base64String: '',
    base64PrivateKey:'',
    stringPrivateKey:'',
})
const rsaState = reactive({
    plaintext:'',
    exportPublicKey: '',
    exportPrivateKey: '',
    rsaEncrypt: '',
    rsaDecrypt: ''
})

const encrypt = async () => {
    const key = await generateKey()
    state.key = key
    const encryptedData = await encryptData(state.plaintext, key)
    state.encryptedData = encryptedData
    const decryptedData = await decryptData(state.encryptedData, key)
    state.decryptedData = decryptedData
}

function decodeBase64Node(type,base64String: string): Buffer {
    if(type == "1"){
        base64Data.base64String = Buffer.from(base64String, 'base64')
        console.log(base64Data.base64String)
        return Buffer.from(base64String, 'base64');
    }else if(type == "2"){
        base64Data.stringPrivateKey = Buffer.from(base64String, 'base64')
        console.log(base64Data.stringPrivateKey)
        return Buffer.from(stringPrivateKey, 'base64');
    }
    
}

const rsa = async () => {
   const rsaedDecrypt = await rsaDecrypt1(rsaState.exportPrivateKey,rsaState.plaintext)
   rsaState.rsaDecrypt = rsaedDecrypt
}




const rsaData  =  reactive({
    exportPrivateKey:"",
    rsaKeyString:"",
    plaintext:"",
})

// 解密函数
async function decryptData11(privateKeyData,encryptedData) {
    const privateKey = privateKeyData; // 注意：前端通常不应该有私钥！
    const decrypt = new JSEncrypt();
    decrypt.setPrivateKey(privateKey);
    
    const decrypted = decrypt.decrypt(encryptedData);
    if (!decrypted) {
        throw new Error('解密失败');
    }
    rsaData.plaintext = decrypted
    return decrypted;
}

</script>
<style lang="scss" scoped>
.container{
    margin: 20px;
}
</style>